<template>
   <el-col :span="24" class="header">
        <el-col :span="10" class="logo"><img src=''> 
        {{sysName}}
        </el-col>
            <el-col :span="10" class="userinfo">
            <el-dropdown trigger="hover">
                <span class="el-dropdown-link userinfo-inner">
                     <img :src="this.from.avatar">
                   {{this.from.name}}
                </span>
                <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>我的消息</el-dropdown-item>
                <el-dropdown-item @click.native="passwordButton">修改密码</el-dropdown-item>
                <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </el-col>
		</el-col>
</template>
<script>
import jwt_decode from 'jwt-decode';
export default {
    name:'headNav',
    data() {
        return{
           sysName:"IUBook后台管理",
            from:{
                name:'',
                avatar:'',
            },
        }
    },
    methods:{
        logout(){
            localStorage.removeItem('token');
            this.$router.push('/')
        }
    },
    mounted() {
       this.from = jwt_decode(localStorage.token);
       console.log(this.from)
    }
}
</script>
<style scoped>
.header {
height: 60px;
line-height: 60px;
background-color: #324057;
color: #fff;
}
.header .userinfo {
    text-align: right;
    padding-right: 35px;
    float: right;
    }
.header .userinfo .userinfo-inner{
cursor: pointer;
color: #fff;
}
.header .userinfo .userinfo-inner img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin: 10px 0px 10px 10px;
        float: right;
}
.header .logo {
    height: 60px;
    font-size: 22px;
    padding-left: 20px;
    padding-right: 20px;
    border-color: rgba(238, 241, 146, 0.3);
}
.header .logo img {
    width: 40px;
    float: left;
    margin: 10px 10px 10px 18px;
    }
.header .logo .txt {
    color: #ffffff;
}
.header .logo-width {
    width: 400px;
}
.header   .logo-collapse-width {
    width: 60px;
}

</style>

